<template>
	<view>
		<!-- 状态栏占位符h5 -->
		<view class="status_bar"></view>
		<!-- #ifdef MP -->
		<view class="pl-20r pr-20r" :style="{'height':navibarHeight+'px'}">
			<view class="flex items-center" :style="{'width':navibarWidth+'px'}" style="height: 100%;">
				<text @click="backClick" class="flex-1 iconfont icon-zuojiantou"></text>
				<view class="flex-8 flex items-center">
					<image class="w-70r h-70r rounded-35r" :src="publisher.avatar" mode="aspectFill"></image>
					<text class="ml-10r text-30r">{{publisher.nickname}}</text>
				</view>

			</view>
		</view>
		<!-- #endif -->

		<!-- #ifndef MP -->
		<view class="fixed z-16 pl-20r pr-20r h-100r third-bg-color" style="width: 100%;">
			<view class="flex items-center" style="height: 100%">
				<text @click="backClick" class="flex-1 iconfont icon-zuojiantou"></text>
				<view class="flex-14 flex items-center">
					<image class="w-70r h-70r rounded-35r" :src="publisher.avatar" mode="aspectFill"></image>
					<text class="ml-10r text-30r">{{publisher.nickname}}</text>
				</view>

			</view>

		</view>
		<view class="h-100r" style="width: 100%;"></view>
		<!-- #endif -->

		<!-- 轮播图 -->
		<swiper style="height: 750rpx;background-color: #fff;" indicator-dots autoplay :interval="3000" :duration="1000"
			:indicator-color='theme.thirdColor' :indicator-active-color='theme.secondColor'>
			<swiper-item v-for="(item,index) in dynamic.dynamic_banner_imgs" :key="index">
				<view class="">
					<image class="w-750r h-750r" :src="item" mode="aspectFit"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 轮播图 结束-->

		<!-- 动态内容 -->
		<view class="mt-20r pl-20r pr-20r pb-10r" style="border-bottom: 2rpx solid #E5E5E5;">
			<view class="mb-20r">
				<text class="text-deep font-bold">{{dynamic.content}}</text>
			</view>
			<view class="text-light flex text-20r">
				<text class="mr-20r">编辑于{{dynamic._add_time_str}}</text>
				<text>武汉</text>
			</view>
		</view>
		<!-- 动态内容 -->

		<!-- 包含设计作品 -->
		<view @click="clickRelatedWork" v-if="dynamic.hasWork" class="flex items-center pl-20r pr-20r h-80r"
			style="border-bottom: 2rpx solid #E5E5E5 ;">
			<image class="w-60r h-60r" :src="relatedImg" mode="aspectFill"></image>
			<text class="text-26r flex-1 ml-15r">{{dynamic.relatedWork.template.name + '《' +dynamic.relatedWork.name + '》'}}</text>
			<view class="text-light flex items-center text-30r">
				<text>相关设计</text>
				<text class="iconfont icon-youjiantou"></text>
			</view>
		</view>
		<!-- 包含设计 结束 -->

		<!-- 评论 -->
		<view class="pl-20r pr-20r" style="padding-bottom: 120rpx;">
			<view class="mt-10r mb-10r text-main text-20r">共{{comment_count}}条评论</view>
			
			
			<view class="flex">
				<view class="flex items-center mr-10r">
					<image class="w-70r h-70r rounded-35r" :src="avatar" mode="aspectFill"></image>
				</view>
				<view class="flex-1">
					<uni-easyinput type="text" :focus=isFocus @confirm="sendComment" confirmType="send" :styles="styles" v-model="value" placeholder="说点什么吧~">
					</uni-easyinput>
				</view>
			</view>
			
			<view v-if="comment_count" v-for="(item,idx) in comments" class="mt-10r" style="border-bottom: 2rpx solid #E5E5E5;">
				<view class="flex ">
					<image :src="item.commenter.avatar" class="mr-10r w-70r h-70r rounded-35r" mode="aspectFill"></image>
					<view class="flex flex-col">
						<text class="text-30r text-deep">{{item.commenter.nickname}}</text>
						<text class="text-20r text-main">{{vk.pubfn.dateDiff(item._add_time)}}</text>
					</view>
				</view>
				<view class="pl-80r pt-10r pb-10r">
					<text class="text-deep">{{item.comment_content}}</text>
					<!-- <text @click="this.expanded = !this.expanded" class="main-color" v-show="this.realComment.length > 100">{{this.expanded ?'收起':'展开'}}</text> -->
				</view>

			</view>
			<view v-else class="mt-20r mb-20r flex flex-center items-center">
				<text class="text-light">快来抢沙发吧~</text>
			</view>
			
		</view>
		<!-- 评论 结束-->

		<!-- 点赞 收藏 评论 -->
		<view class="fixed pt-10r bottom-0 z-16 h-90r third-bg-color box-shadow"
			style="width: 100%;margin-top: 100rpx;">
			<view class="flex justify-around">
				<view class="flex flex-col flex-center">
					<text @click="like" class="text-50r iconfont icon-dianzan" :style="{color:this.isLiked?'red':''}"></text>
					<text class="text-20r text-main">{{like_num}}</text>
				</view>
				<view class="flex flex-col flex-center">
					<text @click="collect" class="text-50r iconfont icon-shoucang" :style="{color:this.isCollected?'red':''}"></text>
					<text class="text-20r text-main">{{collect_num}}</text>
				</view>
				<view class="flex flex-col flex-center">
					<text @click="giveComment" class="text-50r iconfont icon-pinglun"></text>
					<text class="text-20r text-main">{{comment_count}}</text>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
import consoleLog from '../../uni_modules/vk-unicloud/vk_modules/vk-unicloud-page/libs/install/console.log';
	export default {
		data() {
			return {
				id: "",
				navibarHeight: 0,
				menuButtonWidth: 0,
				navibarWidth: 0,
				hasWork: true,
				comment_count: 0,
				like_num:0,
				collect_num:0,
				value: "",
				styles: {
					color: '#FF5632',
					borderColor: '#E5E5E5'
				},
				dynamic: {},
				relatedImg:"",
				publisher: {},
				relatedWork:{},
				isLiked: false,
				isCollected:false,
				isFocus:false,
				comments:[],
				realComment: '专家评论为贯彻落实党的十九大关于深化机构改革的决策部署，2018年3月中共中央印发《深化党和国家机构改革方案》，成立中央网络安全和信息化委员会，负责国家网信领域重大工作的顶层设计、总体布局，成立中央网络安全和信息化委员会，负责国家网信领域重大工作的顶层设计、总体布局，成立中央网络安全和信息化委员会，负责国家网信领域重大工作的顶层设计、总体布局',
				expanded:true,
					
			};
		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {
			comment() {
				if(!this.expanded){
					
					return this.realComment.substr(0, 100);//字符串截取100个字
				}else{
					return this.realComment;
				}
			},
			avatar() {
				if (vk.getVuex('$user.userInfo._id')) {
					return vk.getVuex('$user.userInfo.avatar') || '../../static/images/默认头像.png';
				} else {
					return '../../static/images/默认头像.png';
				}
			},
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			this.id = options.id;


			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {

		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {

		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {

		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {

		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				// #ifdef MP
				uni.getSystemInfo({
					success: (r) => {
						let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
						let statusBarHeight = r.statusBarHeight;
						this.navibarHeight = menuButtonInfo.height + (menuButtonInfo.top -
							statusBarHeight) * 2;
						this.menuButtonWidth = menuButtonInfo.width + (r.screenWidth - menuButtonInfo.right) *
							2;
						this.navibarWidth = r.screenWidth - this.menuButtonWidth;
						console.log(this.navibarHeight);
					}
				})
				// #endif
				vk.callFunction({
					url: 'client/dynamic/kh/getDynamicDetail',
					title: '加载中...',
					data: {
						_id: options.id
					}
				}).then((r) => {
					this.dynamic = r.data;
					this.publisher = r.data.publisher;
					this.comments = r.data.comments;
					this.comment_count = this.comments.length;
					this.like_num = r.data.like_num;
					this.isLiked = r.data.isLiked;
					this.collect_num = r.data.collect_num;
					this.isCollected = r.data.isCollected;
					if(r.data.relatedWork){
						this.relatedWork = r.data.relatedWork;
						this.relatedImg = this.relatedWork.cloth_imgs[0];
					}
					
					
					console.log('动态数据是' + this.dynamic._id);
				});

			},
			like(){
				
				if (!this.isLiked) {
					vk.callFunction({
						url: 'client/like/kh/addLike',
						title: '加载中...',
						data: {
							dynamic_id: this.dynamic._id
						}
					}).then((r) => {
						vk.toast('点赞成功');
						this.isLiked = !this.isLiked;
						this.like_num = this.like_num+1;
						// this.trigger = false;
					});
				} else {
					vk.callFunction({
						url: 'client/like/kh/delLike',
						title: '加载中...',
						data: {
							dynamic_id: this.dynamic._id
						}
					}).then((r) => {
						vk.toast('取消点赞成功');
						this.isLiked = !this.isLiked;
						this.like_num = this.like_num-1;
						// this.trigger = false;
					});
				}
			},
			collect(){
				if (!this.isCollected) {
					vk.callFunction({
						url: 'client/collection/kh/addCollection',
						title: '加载中...',
						data: {
							dynamic_id: this.dynamic._id
						}
					}).then((r) => {
						vk.toast('收藏成功');
						this.isCollected = !this.isCollected;
						this.collect_num = this.collect_num+1;
						// this.trigger = false;
					});
				} else {
					vk.callFunction({
						url: 'client/collection/kh/delCollection',
						title: '加载中...',
						data: {
							dynamic_id: this.dynamic._id
						}
					}).then((r) => {
						vk.toast('取消收藏成功');
						this.isCollected = !this.isCollected;
						this.collect_num = this.collect_num-1;
						// this.trigger = false;
					});
				}
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			giveComment(){
				this.isFocus = true;
			},
			clickRelatedWork(){
				vk.navigateTo({
					url: '/pages/work_detail/work_detail?id=' + this.relatedWork._id
				})
			},
			refreshComments(){
				vk.callFunction({
					url:'client/comment/kh/getCommentsByDynamic',
					title: '加载中...',
					data: {
						dynamic_id:this.dynamic._id
					}
				}).then((r) => {
					
					this.comments = r.data;
					this.comment_count = this.comments.length;
				});
				console.log(this.comments);
			},
			backClick() {
				uni.navigateBack();
			},
			sendComment(){
				vk.callFunction({
					url:'client/comment/kh/publishComment',
					title: '发布中...',
					data: {
						content:this.value,
						dynamic_id:this.dynamic._id
					}
				}).then((r) => {
					this.refreshComments();
					this.value = '';
				});
			}
		},

	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F1F1F1;
		;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
